/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="third-content">
    <Title title="第三方机构"></Title>
    <div class="main">
      <div class="item laowu">
        <i class="iconfont icon-laowujiufen"></i>
        <span class="name">劳务机构</span>
        <span class="num">{{thirdCom.laowu}}</span>
        <span class="unit">家</span>
      </div>
      <div class="item pinggu">
        <i class="iconfont icon-pinggu"></i>
        <span class="name">评估公司</span>
        <span class="num">{{thirdCom.pingu}}</span>
        <span class="unit">家</span>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "../Title";

export default {
  props: {
    thirdCom: Object
  },
  data() {
    return {};
  },
  watch: {},
  components: {
    Title
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";

.third-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .main {
    width: 100%;
    height: 80%;
    .item {
      height: 50%;
      width: 100%;
      padding: 1vw;
      font-size: 2.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 3rem;
        margin-right: 1vw;
      }
      .unit,
      .name {
        font-size: 2rem;
        margin-top: 0.5vw;
        color: #fff;
      }
      .unit {
        margin-left: 0.5vw;
      }
      .name {
        margin-right: 0.5vw;
      }
      .num {
        font-family: "digifacewide";
        color: @primary;
        font-size: 3rem;
      }
    }
    .laowu {
      i {
        color: @color1;
      }
    }
    .pinggu {
      i {
        color: @color2;
      }
    }
  }
}
</style>
